<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue2.0 study</title>
</head>
<body>
<div id="app1">
    <ol>
        <!-- Create an instance of the todo-item component -->
        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
    </ol>
</div>

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
    <p>Reversed message: "{{ reverseMessage() }}"</p>
    <div v-bind:class="{ active: isActive }">存在</div>

    <div class="static"
         v-bind:class="{ active: isActive, 'text-danger': hasError }">开始
    </div>
    <div :class="[activeClass, errorClass]">数组</div>

    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>

    <template v-if="ok">
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template>

    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>

    <div v-for="(value, key, index) in object">
        {{ index }}. {{ key }} : {{ value }}
    </div>
    <div>
        <div v-for="n in 10">
            {{n}}
            <!--<span v-for="i in {{n}}">*</span>-->
        </div>
    </div>
    <my-component
            v-for="(item, index) in items"
            v-bind:item="item"
            v-bind:index="index">
    </my-component>


</div>



</body>
<script src="vue2.0.js"></script>
<script>

    oSort([0,0,1,2,3,1,12,15,12,10]);
    function oSort(arr)
    {
        var result ={};
        var newArr=[];
        for(var i=0;i<arr.length;i++)
        {
            if(!result[arr])
            {
                newArr.push(arr);
                result[arr]=1
            }
        }
        console.log( newArr.join(','));

    }
    // 最简单数组去重法
    function unique1(array){
        var n = []; //一个新的临时数组
//遍历当前数组
        for(var i = 0; i < array.length; i++){
//如果当前数组的第i已经保存进了临时数组，那么跳过，
//否则把当前项push到临时数组里面
            if (n.indexOf(array[i]) == -1) n.push(array[i]);
        }
        return n;
    }

    // 将相同的值相邻，然后遍历去除重复值
    function unique4(array){
        array.sort();
        var re=[array[0]];
        for(var i = 1; i < array.length; i++){
            if( array[i] !== re[re.length-1]){
                re.push(array[i]);
            }
        }
        return re;
    }


    // 速度最快， 占空间最多（空间换时间）
    function unique2(array){
        var n = {}, r = [], len = array.length, val, type;
        for (var i = 0; i < len; i++) {
            val = array[i];
            type = typeof val;
            if (!n[val]) {
                n[val] = [type];
                r.push(val);
            } else if (n[val].indexOf(type) < 0) {
                n[val].push(type);
                r.push(val);
            }
        }
        return r;
    }


    Vue.component('todo-item',{
        props: ['todo'],
        template:'<li>{{todo.text}}</li>'
    });

    var app1 = new Vue({
        el:'#app1',
        data:{
            groceryList:[
                { text: 'Vegetables' },
                { text: 'Cheese' },
                { text: 'Whatever else humans are supposed to eat' }
            ]
        }
    });

    var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello',
            isActive:true,
            hasError:false,
            activeClass: 'active',
            errorClass: 'text-danger',
            ok:true,
            type:'B',
            object: {
                FirstName: 'John',
                LastName: 'Doe',
                Age: 30
            }
        },
        computed: {
            // a computed getter
            reversedMessage: function () {
                // `this` points to the vm instance
                return this.message.split('').reverse().join('')
            }
        },
        methods: {
            reverseMessage: function () {
                return this.message.split('').reverse().join('')
            }
        }
    });
</script>
</html>